<template>
	<view>
		<view class="container form-content">
      <view class="container" v-if="detail && detail.standardItem">
        <view class="hidden-title">基本信息</view>
        <view class="background-white">
          <view class="flex text bor-btm">
            <text class="text-label">润滑部位：</text>
            <text>{{ detail.standardItem.position || '--' }}</text>
          </view>
          <view class="flex text bor-btm">
            <text class="text-label">油脂规格型号：</text>
            <text>{{ detail.standardItem.className || '--' }}</text>
          </view>
          <view class="flex text bor-btm">
            <text class="text-label">润滑标准：</text>
            <text>{{ detail.standardItem.standard || '--' }}</text>
          </view>
          <view class="flex text bor-btm">
            <text class="text-label">润滑方式：</text>
            <text>{{ ['加油', '换油'][detail.standardItem.method] || '--' }}</text>
          </view>
          <view class="flex text bor-btm">
            <text class="text-label">加油量：</text>
            <text>{{ detail.standardItem.oid || '--' }}</text>
          </view>
          <template v-if="this.from === 'TOBEEXECUTE'">
            <view class="flex text bor-btm">
              <text class="text-label">实际加</text>/换油量（kg）：
              <text>{{ detail.realOid || '--' }}</text>
            </view>
            <view class="flex text bor-btm">
              <text class="text-label">实际润滑时间：</text>
              <text>{{ detail.startTime ? detail.startTime.slice(0, 16) : '--' }}</text>
            </view>
            <view class="flex text bor-btm">
              <text class="text-label">润滑结果：</text>
              <text>{{ ['未执行', '正常', '隐患', '缺陷'][detail.status] || '--' }}</text>
            </view>
          </template>
        </view>
      </view>
      <template v-if="this.from === 'TOBECONFIRM' && detail.taskSubItems && detail.taskSubItems.length">
        <view class="maintenance-step">
          <view class="hidden-title">润滑记录</view>
          <view class="">
            <view class="step-block" v-for="(lubricationItem, lubricationIndex) in detail.taskSubItems" :key="lubricationIndex">
              <view class="step">
                <view class="step-no">{{ lubricationIndex+1 > 9 ? lubricationIndex + 1 : '0' + Number(lubricationIndex+1)}}</view>
              </view>
              <view class="step-content background-white">
                <view class="content-item">
                  <text style="text-indent: 5px">实际加/换油量（kg）：</text>
                  <text>{{ lubricationItem.oid || '--' }}</text>
                </view>
                <view class="content-item">
                  <text style="text-indent: 5px">润滑人员：</text>
                  <text>{{ lubricationItem.userNames || '--' }}</text>
                </view>
                <view class="content-item">
                  <text style="text-indent: 5px">实际润滑时间：</text>
                  <text>{{ lubricationItem.startTime ? lubricationItem.startTime.slice(0, 16) : '--' }}</text>
                </view>
                <view class="content-item">
                  <text style="text-indent: 5px">润滑结果：</text>
                  <text>{{ ['', '正常', '隐患', '缺陷'][lubricationItem.status] || '' }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
		</view>
	</view>
</template>

<script>
import { queryTaskItemDetail } from '@/api/equipment/lubrication';
// import View from "../../report-form/query/view.vue";
export default {
  // components: {View},
  data() {
    return {
      taskId: '',
      itemId: '',
      from: '',
      detail: {},
    };
  },
  onLoad({ title, taskId, itemId, from }) {
    this.taskId = taskId;
    this.itemId = itemId;
    this.from = from
    this.setTitle(title)
    this.getDetail();
  },
  onPullDownRefresh() {
    this.getDetail();
  },
  methods: {
    setTitle(title) {
      uni.setNavigationBarTitle({
        title: title
      })
    },
    getDetail() {
      const enableUser = this.from === 'TOBEEXECUTE'
      queryTaskItemDetail(this.taskId, this.itemId, enableUser).then(({ data }) => {
        this.detail = data
        if (enableUser) {
          const taskSubItem = data.taskSubItems?.[0] || {}
          Object.assign(this.detail, {
            startTime: taskSubItem.startTime,
            realOid: taskSubItem.oid,
            status: taskSubItem.status
          })
        }
      })
    }
  },
};
</script>

<style lang="scss">
  .container {
    width: 96%;
    margin: 10px auto;
    .background-white {
      background-color: #fff;
      padding: 5px 10px;
      box-sizing: border-box;
      border-radius: 10px;
      .uni-forms-item__label {
        color: #333;
        font-size: 30rpx;
      }

      .text {
        margin: 10px 0;
        color: #999;

        text {
          color: #333;
        }
      }
    }
  }

  .hidden-title {
    background: #f5f5f5;
    padding: 5px 0;
    color: #999;
  }

  .bor-top {
    border-top: 20rpx solid #f5f5f5;
  }

  .form-content {
    margin-bottom: 107px;
  }

  .submit-group {
    background: #fff;
    padding: 20px;
  }
  .maintenance-step{
    width: 96%;
    margin: 0 auto;
    .step-block{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
    }
    .step{
      width: 8%;
      .step-no{
        text-align: left;
        line-height: 30px;
      }
    }
    .step-content{
      width: 92%;
      border-radius: 10px;
      .uni-view{
        word-break: break-all;
        padding: 5px
      }
      .content-item{
        padding: 5px;
        font-size: 15px;
        uni-text:first-child{
          color: #999;
        }
      }
    }
  }

</style>
